<template>
  <div class="main-container">
    <div class="menu-container">
      <el-menu :default-active="$route.path"
               class="el-menu-vertical-demo"
               :router="true"
               background-color="#33414f"
               text-color="#fff"
               active-text-color="#ffd04b"
               :unique-opened="false">
        <!-- 静态菜单项 -->
        <el-menu-item :index="`/teacher/home?id=${id}`" icon="HomeFilled">
          <span>首页</span>
        </el-menu-item>
        <el-menu-item :index="`/teacher/timetable?id=${id}`" icon="HomeFilled">
          <span>我的课表</span>
        </el-menu-item>
        <el-menu-item :index="`/teacher/publish/course?id=${id}`" icon="Document">
          <span>发布课程</span>
        </el-menu-item>


        <!-- 动态生成课程相关菜单 -->
        <el-sub-menu v-for="course in courses" :key="course.cno" :index="`/teacher/course/${course.cno}`">
          <template #title>
            <el-icon><component :is="course.icon || 'Document'"/></el-icon>
            <span>{{ course.cname }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="`/teacher/student/score?id=${id}&cno=${course.cno}`">
              <el-icon><component :is="course.icon || 'Document'"/></el-icon>
              <span>学生成绩</span>
            </el-menu-item>
            <el-menu-item :index="`/teacher/student/attend?id=${id}&cno=${course.cno}`">
              <el-icon><component :is="course.icon || 'Finished'"/></el-icon>
              <span>学生出勤</span>
            </el-menu-item>
            <el-menu-item :index="`/teacher/student/rate?id=${id}&cno=${course.cno}`">
              <el-icon><component :is="course.icon || 'StarFilled'"/></el-icon>
              <span>学生评教</span>
            </el-menu-item>
            <el-menu-item :index="`/teacher/inform/notice?id=${id}&cno=${course.cno}`">
              <el-icon><component :is="course.icon || 'List'"/></el-icon>
              <span>发布通知</span>
            </el-menu-item>
            <el-menu-item :index="`/teacher/inform/attend?id=${id}&cno=${course.cno}`">
              <el-icon><component :is="course.icon || 'DocumentAdd'"/></el-icon>
              <span>发布签到</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <!-- 其他静态菜单项 -->
        <el-sub-menu v-if="isHeader" index="班级管理" icon="DataLine">
          <template #title>
            <el-icon><component :is="'DataLine'"/></el-icon>
            <span>我的班级</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="`/teacher/class/student?id=${id}`">
              <el-icon><component :is="'MessageBox'"/></el-icon>
              <span>学生信息</span>
            </el-menu-item>
            <el-menu-item :index="`/teacher/class/score?id=${id}`">
              <el-icon><component :is="'Document'"/></el-icon>
              <span>学生成绩</span>
            </el-menu-item>
            <el-menu-item :index="`/teacher/class/attend?id=${id}`">
              <el-icon><component :is="'Finished'"/></el-icon>
              <span>学生出勤</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="content-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import axios from "axios";
import { ref, onMounted } from 'vue';

const route = useRoute();
const id = route.query.id;
let courses = ref([]);
const teacher = ref([])
const isHeader = ref(false)

onMounted(() => {
  getData();
});

const getData = () => {
  axios.get('http://localhost:8080/getCoursesByTno', {
    params: {
      tno: id,
    }
  })
      .then(response => {
        courses.value = response.data;
        console.log(courses.value);
      })
      .catch(error => {
        window.alert('获取课程信息时出现问题');
      });
  axios.get('http://localhost:8080/getMyTData',{
    params:{
      id:id
    }
  }).then(response => {
    teacher.value=response.data
    if (teacher.value.classid != 0){
      isHeader.value = true
    }
  })
      .catch(error => {
        console.log(error);
      });
  console.log(isHeader.value)
};
</script>

<style scoped>
.main-container {
  display: flex;
}

.menu-container {
  width: 200px; /* 根据需要调整宽度 */
}

.content-container {
  flex-grow: 1;
  padding: 15px;
}
.el-menu-vertical-demo {
  min-height: 100vh;
}
</style>